<template>
  <div class="api-doc-container">
    <h2>接口文档 (Swagger)</h2>
    <div class="description-box">
      <p>
        所有后端API都通过 Swagger 进行了详细的文档化。您可以通过以下链接访问实时更新的API文档，进行接口查看和在线调试。
      </p>
      <p>
        API文档地址: 
        <a :href="swaggerUrl" target="_blank">{{ swaggerUrl }}</a>
      </p>
      <p class="important-note">
        <strong>注意：</strong> 实际接口文档请以后端 API 接口为准。
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const swaggerUrl = ref('');

onMounted(() => {
  const apiUrl = "http://localhost:5000";
  try {
    const url = new URL(apiUrl);
    swaggerUrl.value = `${url.origin}/swagger/index.html`;
  } catch (error) {
    console.error("无法解析API基础URL:", apiUrl, error);
    swaggerUrl.value = '/swagger/index.html'; 
  }
});
</script>

<style scoped>
.api-doc-container {
  padding: 20px;
}
.description-box {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}
p {
  line-height: 1.6;
}
a {
  color: #409eff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.important-note {
  margin-top: 15px;
  color: #e6a23c;
  font-weight: bold;
}
</style>